import React, { useState, useEffect } from 'react'
import {
	Space,
	Card,
	Button,
	Cascader,
	DatePicker,
	Form,
	Input,
	InputNumber,
	Mentions,
	Select,
	TreeSelect,
	Upload,
} from 'antd'

import type { SelectProps, TreeSelectProps, GetProp } from 'antd'
import TextArea from 'antd/es/input/TextArea'
import { UploadOutlined } from '@ant-design/icons'
import Editor from '@/components/Editor'
const { RangePicker } = DatePicker
const formItemLayout = {
	labelCol: {
		xs: { span: 24 },
		sm: { span: 6 },
	},
	wrapperCol: {
		xs: { span: 24 },
		sm: { span: 14 },
	},
}
const options: SelectProps['options'] = []
for (let i = 10; i < 36; i++) {
	options.push({
		label: i.toString(36) + i,
		value: i.toString(36) + i,
	})
}
type DefaultOptionType = GetProp<TreeSelectProps, 'treeData'>[number]
interface Option {
	value: string
	label: string
	children?: Option[]
}

const Cascaderoptions: Option[] = [
	{
		value: 'zhejiang',
		label: 'Zhejiang',
		children: [
			{
				value: 'hangzhou',
				label: 'Hangzhou',
				children: [
					{
						value: 'xihu',
						label: 'West Lake',
					},
				],
			},
		],
	},
	{
		value: 'jiangsu',
		label: 'Jiangsu',
		children: [
			{
				value: 'nanjing',
				label: 'Nanjing',
				children: [
					{
						value: 'zhonghuamen',
						label: 'Zhong Hua Men',
					},
				],
			},
		],
	},
]
const normFile = (e: any) => {
	if (Array.isArray(e)) {
		return e
	}
	return e?.fileList
}

const AntdForm: React.FC = () => {
	const [form] = Form.useForm()

	const onFinish = (values: any) => {
		console.log('提交表单且数据验证成功后回调事件')
		console.log('Received values of form: ', values)
	}
	const onFinishFailed = (errorInfo: any) => {
		console.log('提交表单且数据验证失败后回调事件')
		console.log('errorInfo: ', errorInfo)
	}
	const onReset = () => {
		console.log('清空表单')
		form.resetFields()
	}
	const [treeData, setTreeData] = useState<
		Omit<DefaultOptionType, 'label'>[]
	>([
		{ id: 1, pId: 0, value: '1', title: 'Expand to load' },
		{ id: 2, pId: 0, value: '2', title: 'Expand to load' },
		{ id: 3, pId: 0, value: '3', title: 'Tree Node', isLeaf: true },
	])

	const genTreeNode = (parentId: number, isLeaf = false) => {
		const random = Math.random().toString(36).substring(2, 6)
		return {
			id: random,
			pId: parentId,
			value: random,
			title: isLeaf ? 'Tree Node' : 'Expand to load',
			isLeaf,
		}
	}

	const onLoadData: TreeSelectProps['loadData'] = ({ id }) =>
		new Promise((resolve) => {
			setTimeout(() => {
				setTreeData(
					treeData.concat([
						genTreeNode(id, false),
						genTreeNode(id, true),
						genTreeNode(id, true),
					])
				)
				resolve(undefined)
			}, 300)
		})
	useEffect(() => {
		// form 赋值
		const data = {
			Input: '123',
			InputNumber: 2,
			TextArea: 'TextArea',
			Mentions: 'Mentions',
			// Cascader: ['1', '3'],
			Select: 'a10',
		}
		form.setFieldsValue({
			...data,
		})
	})
	const onValueChange = (value: string) => {
		console.log('onValueChange: ', value)
	}

	return (
		<Card title='Ant Design From'>
			<Form
				form={form}
				{...formItemLayout}
				onFinish={onFinish}
				onFinishFailed={onFinishFailed}
				variant='filled'
				style={{ maxWidth: 600 }}
			>
				<Form.Item
					label='Input'
					name='Input'
					rules={[{ required: true, message: 'Please input!' }]}
				>
					<Input />
				</Form.Item>

				<Form.Item
					label='InputNumber'
					name='InputNumber'
					rules={[{ required: true, message: 'Please input!' }]}
				>
					<InputNumber style={{ width: '100%' }} />
				</Form.Item>

				<Form.Item
					label='TextArea'
					name='TextArea'
					rules={[{ required: true, message: 'Please input!' }]}
				>
					<Input.TextArea />
				</Form.Item>

				<Form.Item
					label='Mentions'
					name='Mentions'
					rules={[{ required: true, message: 'Please input!' }]}
				>
					<Mentions />
				</Form.Item>

				<Form.Item
					label='Select'
					name='Select'
					rules={[{ required: true, message: 'Please input!' }]}
				>
					<Select options={options} />
				</Form.Item>

				<Form.Item
					label='Select[multiple]'
					name='select-multiple'
					rules={[{ required: true, message: 'Please input!' }]}
				>
					<Select mode='multiple' options={options} allowClear />
				</Form.Item>

				<Form.Item
					label='Cascader'
					name='Cascader'
					rules={[{ required: true, message: 'Please input!' }]}
				>
					<Cascader options={Cascaderoptions} />
				</Form.Item>

				<Form.Item
					label='TreeSelect'
					name='TreeSelect'
					rules={[{ required: true, message: 'Please input!' }]}
				>
					<TreeSelect loadData={onLoadData} treeData={treeData} />
				</Form.Item>

				<Form.Item
					label='DatePicker'
					name='DatePicker'
					rules={[{ required: true, message: 'Please input!' }]}
				>
					<DatePicker />
				</Form.Item>

				<Form.Item
					label='RangePicker'
					name='RangePicker'
					rules={[{ required: true, message: 'Please input!' }]}
				>
					<RangePicker />
				</Form.Item>

				<Form.Item
					label='Upload'
					name='Upload'
					valuePropName='fileList'
					getValueFromEvent={normFile}
					rules={[{ required: true, message: 'Please upload!' }]}
				>
					<Upload
						name='logo'
						action='https://www.mocky.io/v2/5cc8019d300000e80a42fe'
						listType='picture'
					>
						<Button icon={<UploadOutlined />}>
							Click to upload
						</Button>
					</Upload>
				</Form.Item>

				<Form.Item wrapperCol={{ offset: 6, span: 16 }}>
					<Space>
						<Button type='primary' htmlType='submit'>
							Submit
						</Button>
						<Button
							block
							htmlType='button'
							onClick={() => onReset()}
						>
							Reset
						</Button>
					</Space>
				</Form.Item>
			</Form>
		</Card>
	)
}

export default AntdForm
